// 提供一个能够显示Xtx-message组件的函数
// 提供两种形式使用：
// 1.以引入的方式使用
// 2.挂载在原型上

// 渲染组件
// 1.导入提示信息的组件
import { h, render } from "vue"
import XtxMessage from "./Xtx-message.vue"
// 3.准备一个转载信息提示组件的DOM容器,并添加类
const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)
// 定时器标识
let timer = null
export default ({ type, text, countDown }) => {
  countDown as Number
  // 2.将信息提示组件编译为虚拟节点createVNode
  // createVNode(组件,属性对象props，子节点)
  const vnode = h(XtxMessage, { type, text })
  //  4.将虚拟节点渲染再容器中
  // render(虚拟节点，DOM容器)
  render(vnode, div)
  // 5. 开启定时，移出DOM容器内容
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, countDown)
}